<template>
  <div class="fen_card">
    <div class="fen_card_title">{{ info.equName }}</div>
    <div class="fen_card_l">
      <div class="fen_card_l_c" style="height:100%;">
        <div
          :class="{
            'text-navy': isNumberStr(info.status) && info.status == 0,
            'text-danger': info.status == 1
          }"
        >
          <div style="position: relative;">
            <img style="width: 100%;" src="">
            <svg-icon icon-class="fj_zsd" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" />
          </div>
          <!-- <div>{{ info.equOperation.runningStatus == '1' ? '运行中' : '停止' }}</div> -->
          <div v-if="isNumberStr(info.status) && info.status == 0">正常</div>
          <div v-if="info.status == 1">异常</div>
        </div>
        <div style="margin-top:18px;">
          <el-button :loading="loading" type="primary" plain size="mini" style="width:100%" @click="handleView">查看详情</el-button>
        </div>
        <!-- <div style="margin-top:6px;">
          <el-button :loading="controlLoading" type="primary" plain size="mini" style="width:100%" @click="handleControl">指示灯控制</el-button>
        </div> -->
      </div>
    </div>
    <div class="fen_card_info">
      <el-form ref="form" :model="info" label-width="80px" size="mini" label-suffix=":">
        <el-form-item label="设备名称" style="margin-bottom:0;">
          <el-tooltip :content="info.equName" placement="top-start"><div class="text-cut">{{ info.equName }}</div></el-tooltip>
        </el-form-item>
        <el-form-item label="设备位置" style="margin-bottom:0;">
          <el-tooltip :content="info.locationName" placement="top-start"><div class="text-cut">{{ info.locationName }}</div></el-tooltip>
        </el-form-item>
        <el-form-item style="margin-bottom: 0;" label="是否使用" prop="isUsed">
          <span style="color: green;">使用</span>
        </el-form-item>
        <el-form-item label="正面显示" style="margin-bottom:0;">
          <template v-if="info.equOperation.frontDisplay == 'green'">
            <svg-icon icon-class="fj_pass" style="color: green;" /> <span>绿</span>
          </template>
          <template v-if="info.equOperation.frontDisplay == 'red'">
            <svg-icon icon-class="fj_noPass" style="color: red;" /> <span>红</span>
          </template>
        </el-form-item>
        <el-form-item label="背面显示" style="margin-bottom:0;">
          <template v-if="info.equOperation.backDisplay == 'green'">
            <svg-icon icon-class="fj_pass" style="color: green;" /> <span>绿</span>
          </template>
          <template v-if="info.equOperation.backDisplay == 'red'">
            <svg-icon icon-class="fj_noPass" style="color: red;" /> <span>红</span>
          </template>
        </el-form-item>
        <div style="margin-top:6px;">
          <!-- <el-button :loading="controlLoading" type="primary" plain size="mini" style="width:100%" @click="handleControl">指示灯控制</el-button> -->
          <el-popconfirm
            title="是否确认切换显示？"
            placement="right-end"
            @confirm="handleSwitchDisplay"
          >
            <el-button
              slot="reference"
              v-hasPermi="['pilot_lamp:control:switch']"
              :loading="controlLoading"
              type="primary"
              plain
              size="mini"
              style="width:100%"
            >切换显示</el-button>
          </el-popconfirm>
        </div>
      </el-form>
    </div>
    <Control ref="control" @success="success" />
    <Details ref="deviceDetails" />
  </div>
</template>

<script>
import Control from './Control.vue'
import Details from './Details.vue'
// import { getTnnelSection, getDeviceBySection, deviceDetails } from '@/api/fjgs/light'
import { getEqu } from '@/api/fjgs/equ'
import { switchDisplay } from '@/api/fjgs/trafficLight.js'
import { isNumberStr } from '@/utils/index'
export default {
  components: {
    Control,
    Details
  },
  props: {
    info: {
      type: Object,
      default() {
        return {
          equOperation: {}
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      controlLoading: false,
      deviceDetails: {},
      timerr: null,
      isUsed: 0,
      radio: false
    }
  },
  created() {
    this.getDeviceDetails()
    this.loopDeviceDetails()
  },
  beforeDestroy() {
    clearTimeout(this.timerr)
  },
  methods: {
    isNumberStr: isNumberStr,
    loopDeviceDetails() {
      const _this = this
      this.timerr = setTimeout(() => {
        _this.getDeviceDetails().finally(() => {
          _this.loopDeviceDetails()
        })
      }, 30000)
    },
    handleControl() {
      // const row = this.info
      this.controlLoading = true
      this.getDeviceDetails().then(() => {
        const deviceDetails = this.deviceDetails
        this.controlLoading = false
        this.$refs.control.open({
          id: deviceDetails.equOperation.id,
          frontDisplay: deviceDetails.equOperation.frontDisplay,
          backDisplay: deviceDetails.equOperation.backDisplay
        })
      })
    },
    handleSwitchDisplay() {
      this.controlLoading = true
      switchDisplay({ confEquId: this.info.id }).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.$emit('success')
      }).finally(_ => {
        this.controlLoading = false
      })
    },
    handleDetails(row) {
      this.$emit('details')
    },
    async getDeviceDetails() {
      const id = this.info.id
      return await getEqu(id).then(response => {
        console.log(response.data)
        this.deviceDetails = response.data
      })
    },
    handleView() {
      // const row = this.info
      this.loading = true
      this.getDeviceDetails().then(() => {
        this.loading = false
        this.$refs.deviceDetails.open(this.deviceDetails)
      })
    },
    success() {
      this.$emit('success')
    }
  }
}
</script>

<style lang="scss" scoped>
.fen_card {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: flex-end;
    min-width: 320px;
    max-width: 364px;
    // width: 362px;
    height: 258px;
    background-image: url('~@/assets/images/statistics/bg.png');
    background-size: cover;
    // padding-top: 13.8%;
    padding-bottom: 20px;
    border: 1px solid #e6ebf5;
    border-radius: 2px;
    margin: 0 5px;
    // overflow: hidden;
   .fen_card_title {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 15px;
        font-weight: 500;
        color: #FFFFFF;
        height: 25%;
        padding: 5px 10.7% 0 10px;
        background-image: url('./tit_bg.png');
        background-size: 100% 100%;
        z-index: 1;
   }
   .fen_card_l {
        // width: 128px;
        // display: flex;
        // align-items: flex-end;
        // justify-content: center;
        // box-sizing: border-box;
        flex: 0 0 40%;
        padding: 0 10px;
        text-align: center;
        color: #AAAAAA;
        .success {
          color: var(--color-success);
        }
        .error {
          color: var(--color-danger);
        }
        // .fen_card_l_c {
        //   max-width: 80px;
        // }
   }
   .fen_card_info {
      box-sizing: border-box;
      max-width: 60%;
      flex: 1;
      padding:0 16px 0 0;
      &::v-deep {
        .el-form-item__label {
          color: #888;
          font-size: 13px;
          // text-align:justify;
        }
      }
   }
}
</style>
